<!doctype html>
{% extends "base.html" %}
{% block title %}远程控制{% endblock title %}
{% block css %}
    <link rel="stylesheet" href="/assets/css/xterm.css">
    {% comment %} <link rel="stylesheet" href="/assets/css/webssh.css"> {% endcomment %}
    {% comment %} <link rel="stylesheet" href="/assets/libs/bootstrap/css/bootstrap.min.css"> {% endcomment %}

    <style>
        .input-width {
            width: 20%;
            display: inline-block;
        }

        .hide {
            display: none;
        }
    </style>
{% endblock css %}

{% block page2_show %}show{% endblock page2_show %}
{% block page2.1_active %}active{% endblock page2.1_active %}

{% block main_content %}

<div id="form">
    <form class="form-horizontal">
        <div class="form-group row">
            <label class="col-form-label col-sm-2 text-sm-right">主机地址：</label>
            <div class="col-sm-3">
                <input type="text" id="host" class="form-control" required="" placeholder="请输入主机IP" value="127.0.0.1">
            </div>
        </div>

        <div class="form-group row">
            <label class="col-form-label col-sm-2 text-sm-right">SSH端口：</label>
            <div class="col-sm-3">
                <input type="number" id="port" class="form-control" required="" placeholder="请输入ssh端口" value="22">
            </div>
        </div>

        <div class="form-group row">
            <label class="col-form-label col-sm-2 text-sm-right">用户名：</label>
            <div class="col-sm-3">
                <input type="text" id="user" class="form-control" required="" placeholder="请输入用于连接的用户名" value="root">
            </div>
        </div>

        <div class="form-group row align-content-center">
            <label class="col-form-label col-sm-2 text-sm-center">认证类型：</label>
            <div class="col-sm-3">
                <select class="custom-select mb-3" id="auth">
                    <option selected value="pwd">密码认证</option>
                    <option value="key">秘钥认证</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <label class="col-form-label col-sm-2 text-sm-right">密码：</label>
                <div class="col-sm-3">
                    <input type="password" class="form-control" id="password" placeholder="请输入密码">
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <label class="col-form-label col-sm-2 text-sm-right">私钥：</label>
                <div class="col-sm-3">
                    <input type="file" id="pkey">
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label"></label>
            <div class="col-sm-10">
                <span id="helpBlock" class="help-block">
                   注意:
                    <p style="color: red">1、私钥和密码二选一，选择一个另一个则无效</p>
                    <p style="color: red">2、当认证类型为私钥认证时,可以输入密码作为私钥的解密密码</p>
                    <p style="color: red">3、由于直接登录体验较差，使用全屏登录可以使用全屏界面</p>
                </span>
            </div>
        </div>


        <div class="form-group col-sm-4">
            <div class="col-sm-8 ml-sm-auto">
                <button type="button" class="btn btn-success" onclick="full()">全屏登录</button>
                <button type="button" class="btn btn-primary" onclick="websocket()">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</button>
            </div>
        </div>
    </form>
</div>

<div id="django-webssh-terminal" class="hide">
    <div id="terminal"></div>
</div>

{% endblock main_content %}

{% block script %}
<script src="/assets/js/xterm.js"></script>
<script src="/assets/js/webssh.js"></script>
<script>
function full() {
    window.open('/Fullscreenssh');
}
</script>
{% endblock script %}